<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<title>体检报告</title>
		<meta charset="utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<link rel="stylesheet" href="Public/css/index.css" />
		<style type="text/css">
			
		</style>

	</head>

	<body>
		<header>
			<!--<p class="test-00 " id="test">-->
				<!--左右滑动（查看下一份报告）-->
			<!--</p>-->
			<ul class="ul0">
				<li class="li_0" onclick="check(0)">1</li>
				<li class="li1" onclick="check(1)">2</li>
				<li class="li2" onclick="check(2)">3</li>
			</ul>
		</header>
		<div class="page">
			<div id='slider'>
				<ul>
					<li style='display:block'>
						<div class="pinch-zoom">
							<img src="Public/img/01.jpg" width="100%" data="Public/img/01.jpg" />
						</div>
					</li>
					<li style='display:none'>
						<div class="pinch-zoom">
							<img src="Public/img/01.jpg" width="100%" data="Public/img/01.jpg" />
						</div>
					</li>
					<li style='display:none'>
						<div class="pinch-zoom">
							<img src="Public/img/01.jpg" width="100%"  data="Public/img/01.jpg" />
						</div>
					</li>
					<li style='display:none'>
						<div class="pinch-zoom">
							<img src=""  width="100%" data="Public/img/01.jpg"  />
						</div>
					</li>
					<li style='display:none'>
						<div class="pinch-zoom">
							<img src="" width="100%"  data="Public/img/01.jpg" />
						</div>
					</li>
				</ul>

			</div>

		</div>


			<script type="text/javascript" src="Public/js/swipe.js"></script>
			<script type="text/javascript" src="Public/js/jquery-1.7.2.min.js">
			</script>
			<script type="text/javascript" src="Public/js/pinchzoom.min.js"></script>
			<script type="text/javascript">
				var i=0;
				(function (){
					var aa=$("#slider ul li").eq(i).find("img").attr("data");
					var bb=$("#slider ul li").eq(i).find("img");
					bb.attr("src",aa);
					i++;
				})();

				$(function() {
					$('div.pinch-zoom').each(function() {
						new RTP.PinchZoom($(this), {});
					});
					window.mySwipe = new Swipe(document.getElementById('slider'), {
						speed: 400,
//                        callback:function(e){
//							var w=$(".page").width();
//							var index=-this.index;
//							var translate=w*index;
//						//	console.log(translate);
//							var aa=$("#slider ul li").eq(-translate/w).find("img").attr("data");
//							var bb=$("#slider ul li").eq(-translate/w).find("img");
//							bb.attr("src",aa);
//
//						}
					});
				});



				var ss = $(window).scrollTop();
				(function scroll(fn) {
					var beforeScrollTop = document.body.scrollTop,
						fn = fn || function() {};
					window.addEventListener("scroll", function() {
						var afterScrollTop = document.body.scrollTop,
							delta = afterScrollTop - beforeScrollTop;
						if(delta === 0) return false;
						fn(delta > 0 ? $(".test-00").css("position", "absolute") : $(".test-00").css("position", "fixed"));
						beforeScrollTop = afterScrollTop;
					}, false);
				})();

           //   alert($("img").eq(1).attr("src"))
				var w=$(window).width();
//				alert(w)
//				$(".li2").click(function(){
//					$("#slider ul").css("transform","translate3d(-w,0,0)")
//				})

				function check(e){
					x = -w*e;

					//alert(x);
					$("#slider ul").css("transform","translate3d("+x+"px,0,0)");

				}
			</script>
	</body>

</html>